<!-- 登录密码验证 -->
<template>
  <div>
    <a-modal
      title="登录密码验证"
      v-model="modalVisible"
      width='32%'
      @ok="handleSubmit"
      @cancel="handleCancel"
      :maskClosable="false"
      v-dragModal
    >
      <a-form :form="form">
        <a-form-item label="登录密码" v-bind="formLayout" has-feedback>
          <a-input-password 
            v-decorator="['login_password',{
              rules:[
                {required:true,message:$t('Enter')+$t('Password')},
              ]
          }]" type='password'
            :placeholder="keyType=='access_key' ? $t('Enter-access-key-pwd') : $t('Enter-secret-key-pwd')"
          >
          </a-input-password>
        </a-form-item>
      </a-form>
      <template slot="footer">
        <a-button @click="handleReset" class="submit-btn">
          {{$t('Reset')}}
        </a-button>
        <a-button
          class="submit-btn"
          type="primary"
          @click="handleSubmit"
          :loading="submitLoading"
        >
          {{$t('Sure')}}
        </a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: "VerifyPassword",
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    keyType: {
      type: String,
      required: true
    },
    targetArea: {
      type: Object,
      required: true,
      default: () => { return {} }
    },
  },

  data() {
    return {
      modalVisible: false,
      submitLoading: false,
      form: this.$form.createForm(this),
      formLayout:{
        labelCol: {span: 6},
        wrapperCol: {span: 17}
      },
    }
  },

  watch: {
    visible(newValue) {
      this.modalVisible = newValue;
    }
  },

  methods: {
    //提交登录密码验证
    handleSubmit() {
      this.form.validateFields(async (err,value)=>{
        if(!err){
          const params = {
            zone_id: this.targetArea.zone_id,
            username: JSON.parse(localStorage.getItem('loginuser')),
            password: value.login_password,
          };
          const res = await this.$api.areaManage.verifyPasswordRequest(params);
          // console.log(res)
          if(res && res.data) {
            if(res.data.flag === 1) {
              this.model(res.data.id) //返回模板
              this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
            }else {
              this.$message.success(this.$t('Verify-ok'));
              this.$emit('toShowKey', { access_key:res.data.access_key, secret_key:res.data.secret_key });
            }
          }
          this.handleCancel();
        }
      })
    },

    //重置
    handleReset() {
      this.form.resetFields();
    },

    //关闭登录密码验证弹窗
    handleCancel() {
      this.$emit('closeOperateModal', 'verify-pwd');
      this.form.resetFields();
    },
  },
}
</script>
<style scoped>
  .submit-btn {
    width: 70px;
  }
</style>